
$sideSpace = 20px;

.s_ExplDrp_Ttl,
.s_ExplDrp_DescIt
  margin: 9px 50px 3px 20px;  // 50px = space for a close [X] button

.s_ExplDrp_Ttl
  // If it's a "Purpose:" header, then, text follows below, so, add a bit more space.
  &.n_Purp
    margin-bottom: 0.6ex;
  font-size: 15px;
  font-weight: bold;
  color: hsl(0 0% 33%); // otherwise bold is a bit too strong

// If the action-item (e.g. a button) is at the top of the dialog, add some padding.
.esCloseCross + .s_ExplDrp_ActIt
  padding-top: 7px;

.s_ExplDrp_ActIt + .s_NotfPrefDD_Ttl,
.s_ExplDrp_ActIt + .s_ExplDrp_ActIt,
.esExplDrp_entry + .s_NotfPrefDD_Ttl
  margin-top: 14px;

.s_ExplDrp_ActIt   // action item, e.g. button
  list-style: none;
  margin: 0;

  button,
  .c_Asg20,
  .c_AsgsL,
  .esExplDrp_ActIt_Expl
    margin: 0 0 7px $sideSpace;

  .e_AsgB
    margin-left: 9px; // $sideSpace = 20px is a bit much
  // No hover. The button instead has some :hover style.


.esExplDrp_entry  // RENAME to s_ExplDrp_SelIt for "Select Item" (instead of above "Action Item")
  list-style: none;
  margin: 0;
  cursor: pointer;
  border: 2px solid transparent;

  & > a
    display: block;
    text-decoration: none;
  & > a,
  & > button
    padding: 9px $sideSpace;
    @media (max-width: 500px)
      padding-right: 0; // the DropModal has padding-right itself already [5YKF20]
  & > button
    text-align: left; // else center
    border: none;
    background: none;

  &:hover&:not(.c_Dis)
    background: hsl($uiHue, 100%, 97%);
    border: 2px solid hsl($uiHue, 100%, 78%);

  &.c_Dis
    opacity: 0.74;
    cursor: default;
    .esExplDrp_entry_title
      display: inline-block; // otherwise cross too wide

.esExplDrp_entry.active
  $bgColor = hsl($uiHue, 95%, 92%);
  background: $bgColor;
  border: 2px solid $bgColor;
  curtor: default;
  .esExplDrp_entry_title
    color: #111;
  .esExplDrp_entry_expl
    color: #222;

.esExplDrp_entry_title
  color: #222;
  font-weight: bold;
  font-size: 15px;
  .n_TtlCap
    text-transform: capitalize;

.esExplDrp_ActIt_Expl,
.esExplDrp_entry_expl
  color: #333;
  font-size: $postFontSize;

.esExplDrp_entry_sub
  margin: 8px 20px 16px;

// If there's an image/icon to the left of the tilte & text.
.esExplDrp_entry:has(.esExplDrp_entry_img) button
  display: flex;
  // The images a bit function as padding-left, so reduce from $sideSpace = 20px
  // to just .esDropModal_header's padding-left = 11px. [proxy_diag_padding]
  padding-left: 11px;

.esExplDrp_entry_img
  flex: 0

  .esAvtr
    position: static;
    margin-right: 15px;

.esExplDrp_entry_TtlTxt
  flex: 1

